<template>
    <div class="page">
        <div class="top">
            <p class="tip">请填写真实信息，以便查询到你在院内的就诊信息</p>
            <i-cell-group>
                <i-cell title="姓名" i-class="cell" >
                    <input  placeholder="姓名(必填)" :disabled='disable' v-model="userInfo.regular_name" slot="footer" type="text" />
                </i-cell>
                 <i-cell title="手机号码"  i-class="cell" >
                    <input  placeholder="手机号码(必填)" v-model="userInfo.regular_phone" maxlength="11" slot="footer" type="number" />
                </i-cell>
                <i-cell title="就诊卡号" i-class="cell" >
                    <input  placeholder="就诊卡号(实名后同步)" disabled v-model="userInfo.his_patientcard" slot="footer" type="text" />
                </i-cell>
                <i-cell title="身份证号" i-class="cell" >
                    <input  placeholder="身份证号(必填)" :disabled='disable' v-model="userInfo.regular_certid" maxlength="18" slot="footer" type="idcard" />
                </i-cell>
                <i-cell title="实名认证" v-if="regular_type==='1'"  i-class="cell" url="/pages/qualification/main" >
                    <p slot="footer" :class="isreal?'blue':'red'" @click="toQua">{{qualifition}}</p>
                </i-cell>
                <i-cell title="生日"   i-class="cell" url="/pages/qualification/main" >
                    <input placeholder="添加后同步" :disabled='true' v-model="userInfo.birth_day"  slot="footer"  />
                </i-cell>
                <i-cell title="性别" i-class="cell">
                    <div slot="footer" class="footer">
                        <!-- <i-radio value="男" :checked="isMan" ></i-radio>
                        <i-radio value="女" :checked="!isMan" ></i-radio> -->
                        <span @click="changeMale">
                            <img
                            :src="sexDefault ? uncheckedImg : isMan ? mycheckedImg : uncheckedImg"
                            class="checked-image"
                            alt=""
                        />男</span>
                        <span @click="changefemale" style="margin-left:20px">
                            <img
                            :src="sexDefault ? uncheckedImg : isMan ? uncheckedImg : mycheckedImg "
                            class="checked-image"
                            alt=""
                        />女</span>
                    </div>
                </i-cell>
                <i-cell title="民族" @click="showPicker=true" :i-class="[regular_type==='1'?'cell':'cell botCell']" >
                    <input @click="showPicker=true"  placeholder="民族" disabled v-model="userInfo.nation_name" slot="footer" type="text" />
                </i-cell>
                <i-cell title="婚姻" v-if="regular_type==='1'" i-class="cell botCell">
                    <div slot="footer" class="footer">
                        <!-- <i-radio value="已婚" :checked="isMarried" style="paddding:0!important"></i-radio>
                        <i-radio value="未婚" :checked="!isMarried"  style="paddding:0">></i-radio> -->
                          <span @click="changeMarried">
                            <img
                            :src="marriedDefault ? uncheckedImg : isMarried ? mycheckedImg : uncheckedImg"
                            class="checked-image"
                            alt=""
                        />已婚</span>
                        <span @click="changeMarry" style="margin-left:20px">
                            <img
                            :src="marriedDefault ? uncheckedImg : isMarried ? uncheckedImg : mycheckedImg"
                            class="checked-image"
                            alt=""
                        />未婚</span>
                    </div>
                </i-cell>
            </i-cell-group>
        </div>
        <div class="bottom">
            <p class="btn" @click="save">保存</p>
        </div>
        <!-- 民族选择框 -->
        <div class="modalClass" v-if="showPicker">
            <div class="modalBox">
            <!-- <div class="modalTit">
                <img src="/static/images/videoTit.png">
                </div> -->
            <div class="closeBox" @click="showPicker=false">
                <img :src="closeImg" />
            </div>
            <div class="modalCenter">
                <picker-view indicator-style="height:50px;" style="width:100%;height:150px" v-model="nationIndex" value="0" @change="chooseNation">
                    <picker-view-column >
                        <view class="picker" v-for="item in nationList" :key="item.id" style="line-height:50px;text-align:center;color:rgba(34, 75, 198, 1);font-size:40rpx">{{item.name}}</view>
                    </picker-view-column>
                </picker-view>
            </div>
            <div class="modalFooter">
                <div class="btnLeft" @click.stop="cancle">取消</div>
                <div class="btnRight" @click.stop="ok">确认</div>
            </div>
            </div>
        </div>
        <i-message id="message" />
         <i-toast id="toast" />
    </div>
</template>
<script>
import Bus from '@/utils/bus.js'
import api from '@/api/api'
import nationInfo from '../../../../../static/nationFile/nationList'
const { $Toast, $Message } = require('../../../../../static/iview/base');
export default {
    data(){
        return{
            userInfo:{},
            isMan:'',
            isMarried:'',
            marriedDefault: false,
            sexDefault: false,
            isreal:false,
            qualifition:"未实名认证,点击认证",
            regular_id:"",
            cert_front:"",
            cert_front:"",
            disable:false,
            imgUrl: '',
            mycheckedImg: '',
            uncheckedImg: '',
            closeImg: '',
            showPicker: false,
            nationList: [],
            nationIndex: 0,
            regular_certid:'',
            name: '1',
            regular_type: '1' // 就诊人类型  成人 1 /  儿童 2
        }
    },
    onUnload(){
        this.userInfo = {}
        this.regular_id = ''
        this.isreal = false
        this.disable = false
        this.$storage.setContact({})
        this.$storage.removeBackParam('isreal')
          console.log('点击了返回到列表')
        // wx.redirectTo({
        //     url: '/pages/center/child/commonList/main'
        // })
        // wx.navigateBack({
        //     delta: 1
        // })
    },
    onLoad (options) {
        Object.assign(this.$data, this.$options.data())
        this.regular_certid = ''
        this.imgUrl = api.imgUrl
        this.closeImg = this.imgUrl + "close.png";
        this.mycheckedImg = this.imgUrl + 'mychecked.png'
        this.uncheckedImg = this.imgUrl + 'unchecked.png'
        this.nationList = nationInfo.nationList
      console.log(options)
      if(options.id){
          this.regular_id = options.id
          this.echo()
          this.marriedDefault = false
          this.sexDefault = false
          wx.setNavigationBarTitle({
            title: '编辑就诊人'
          })
      } else {
          this.marriedDefault = true
          this.sexDefault = true
      }
      this.regular_type = options.type
    },
    onShow(options){
       this.cantactInfo = this.$storage.getContact()
       console.log(options,'我是onshow',this.$storage.getBackParam())
       if (this.$storage.getBackParam() !== '') {
           this.isreal = this.$storage.getBackParam()
       }
       console.log(this.isreal)

       if ( this.isreal) {
           this.isreal = true
           this.qualifition = '已实名认证,点击查看'
            this.disable = true
            this.sexDefault = false
           if(this.cantactInfo.Name){
                this.userInfo.regular_name = this.cantactInfo.Name
                this.disable = true
            }
            if(this.cantactInfo.IdNum){
                this.userInfo.regular_certid = this.cantactInfo.IdNum
                this.regular_certid = this.userInfo.regular_certid
            }
            if(this.cantactInfo.Sex){
                    if(this.cantactInfo.Sex =='男'){
                        this.isMan = true
                    }else{
                        this.isMan = false
                    }
            }
            if(this.cantactInfo.Nation){
                this.userInfo.nation_name = this.cantactInfo.Nation
            }
            if(this.cantactInfo.topKey){
                    this.userInfo.cert_front = this.cantactInfo.topKey
            }
            if(this.cantactInfo.btmKey){
                    this.userInfo.cert_back = this.cantactInfo.btmKey
            }
       }
    },
    mounted() {
       this.cantactInfo = this.$storage.getContact()
       console.log('this.cantactInfo2',  this.cantactInfo)
       if(this.cantactInfo.Name){
           this.userInfo.regular_name = this.cantactInfo.Name
           this.disable = true
       }
       if(this.cantactInfo.IdNum){
           this.userInfo.regular_certid = this.cantactInfo.IdNum
       }
       if(this.cantactInfo.Sex){
            if(this.cantactInfo.Sex =='男'){
                this.isMan = true
            }else{
                this.isMan = false
            }
       }
       if(this.cantactInfo.Nation){
           this.userInfo.nation_name = this.cantactInfo.Nation
       }
       if(this.cantactInfo.topKey){
             this.userInfo.cert_front = this.cantactInfo.topKey
       }
       if(this.cantactInfo.btmKey){
             this.userInfo.cert_back = this.cantactInfo.btmKey
       }
        //   setTimeout(()=>{
        //       console.log(this.regular_id )
        //        if(this.regular_id ){
        //             this.echo()
        //        }
        //   },800)
        if(this.isreal == true){
            //已认证
            this.qualifition = '已实名认证,点击查看'
            this.disable = true
         }else {
            //未认证
            this.qualifition = '未实名认证,点击认证'
        }
        if (this.$route.query.is_real) {
            this.isreal = this.$route.query.is_real
            this.qualifition = '已实名认证,点击查看'
            this.disable = true
            this.sexDefault = false
        }

    },
    methods: {
        changeMale(){
            this.sexDefault = false
            //选择男性
            var that =  this
            if(!that.userInfo.sex || that.userInfo.sex== ''){
                that.isMan = true
            }

        },
        // 选择民族
        chooseNation(e) {
            console.log(e.mp.detail.value[0])
            // this.nationIndex = e.mp.detail.value[0]
            this.nationIndex = e.mp.detail.value[0]
        },
        ok() {
            this.userInfo.nation_name = this.nationList[this.nationIndex].name
            this.showPicker = false
        },
        cancle() {
            this.nationIndex = 0
            this.showPicker = false
        },
        changefemale(){
            this.sexDefault = false
            //选择女
            var that =  this
            if(!that.userInfo.sex || that.userInfo.sex== ''){
                that.isMan = false
            }
        },
        changeMarried(){
            this.marriedDefault = false
            //已婚
            var that = this
            if(that.isMarried !== true || that.isMarried == ''){
                that.isMarried = true
            }
             console.log('this.isMarried已婚',this.isMarried)
        },
        changeMarry(){
            this.marriedDefault = false
            //未婚
            var that = this
            if(that.isMarried == true || that.isMarried == ''){
                that.isMarried = false
            }
            console.log('this.isMarried未婚',this.isMarried)
        },
        echo(){
            var that = this
            let param = {
                regular_id:that.regular_id
            }
            that.$api.user_query_regular(param, {'showLoading': true}).then(function (data) {
                console.log(data)
                that.userInfo = data.data
                if (that.userInfo.is_marriaged === null) {
                    that.isMarried = ''
                    that.marriedDefault = true
                }else if(that.userInfo.is_marriaged =='1' || that.userInfo.is_marriaged == '已婚'){
                    that.isMarried = true
                }else{
                    that.isMarried = false
                }
                if(that.userInfo.sex =='男'){
                    that.isMan = true
                }else{
                    that.isMan = false
                }
                if(that.userInfo.is_real == '1'){
                    //已认证
                    that.qualifition = '已实名认证,点击查看'
                    that.isreal = true
                    that.disable = true

                    if (that.disable) {
                        let id = that.userInfo.regular_certid
                        id = id[0] + '****************' + id[id.length-1]
                        that.regular_certid = id
                    } else {
                        that.regular_certid = that.userInfo.regular_certid
                    }
                }else {
                    //未认证
                    that.qualifition = '未实名认证,点击认证'
                    that.isreal = false
                }

           })
        },
        toQua(){
            console.log('this.regular_id1111',this.regular_id)
            if(this.regular_id){
                this.$router.push(`/pages/center/child/commonAudit/main?id=${this.regular_id}`)
            }else if (this.isreal){
                this.$router.push('/pages/center/child/commonAudit/main?is_real=true')
            } else {
                this.$router.push('/pages/center/child/commonAudit/main')
            }

        },
        save(){
            var that = this
            if(!this.userInfo.regular_name){
                 $Toast({
                    content: '请输入姓名',
                    type: 'warning'
                })
                return
            }
            if(!this.userInfo.regular_phone){
                 $Toast({
                    content: '请输入手机号',
                    type: 'warning'
                })
                return
            }
            // 1(3|4|5|7|8|9|6)d{9}
            var ph_reg = /^1[34578]\d{9}$/
             if(!ph_reg.test(this.userInfo.regular_phone)){
                 $Toast({
                    content: '请输入合法手机号',
                    type: 'warning'
                })
                return
            }else{

            }
            // if(!this.userInfo.regular_cardno){
            //      $Toast({
            //         content: '请输入就诊卡号',
            //         type: 'warning'
            //     })
            //     return
            // }
            if(!this.userInfo.regular_certid ){
                 $Toast({
                    content: '请输入身份证号',
                    type: 'warning'
                })
                return
            }
            var reg =  /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            if(!reg.test(this.userInfo.regular_certid) && this.userInfo.regular_certid.indexOf('*')=== -1){
                $Toast({
                    content: '请输入合法身份证号',
                    type: 'warning'
                })
                return
            }
            // 判断是否年满14周岁
            let birthday = "";
            let idCard = this.userInfo.regular_certid
            if(idCard != null && idCard != "" && idCard.indexOf('*')===-1){
                if(idCard.length == 15){
                    birthday = "19"+idCard.substr(6,6);
                } else if(idCard.length == 18){
                    birthday = idCard.substr(6,8);
                }
                birthday = birthday.replace(/(.{4})(.{2})/,"$1$2");
                let now = this.$utils.filterTime(new Date().valueOf() / 1000,2).replace(/-/g,'')
                if(now*1 >=birthday*1 + 160000) {  //满16周岁
                    if(this.regular_type === '2') {
                        $Toast({content: '该就诊人年龄已超过16周岁，不属于儿童范畴'})
                        return
                    }
                } else {                          // 未满14周岁
                    if(this.regular_type ==='1') {
                        this.regular_type = '2'
                    }
                }
            }
            var sex = ''
            if(that.isMan===''){
                // 通过身份证 识别性别
                // let sexNum = this.userInfo.regular_certid.slice(-2,-1) * 1
                // sex = sexNum % 2 === 0?'女':'男'
                $Toast({content: '请填写性别'})
                return
            }else{
                sex = that.isMan? '男': '女'
            }
            var is_marriaged = ''
            console.log('this.isMarried222',this.isMarried === true, this.isMarried === false, this.isMarried )
            if(this.isMarried === true){
                is_marriaged = '已婚'
            }else if (this.isMarried === false){
                is_marriaged = '未婚'
            } else {
                is_marriaged = ''
            }
            // method_type:0新增1修改
            var method_type  = ''
            if(this.regular_id){
                method_type = 1
            }else{
                method_type = 0
            }
            let param = {
                regular_name:this.userInfo.regular_name,
                regular_phone:this.userInfo.regular_phone,
                regular_cardno:this.userInfo.regular_cardno,
                regular_certid:this.userInfo.regular_certid,
                method_type:method_type,
                regular_id:this.regular_id,
                sex:sex,
                nation_name:this.userInfo.nation_name,
                is_marriaged:this.marriedDefault ? '' : is_marriaged,
                cert_front:this.userInfo.cert_front,
                cert_back:this.userInfo.cert_back,
                regular_type: this.regular_type
            }
            // return
            that.$api.user_regular_save(param, {'showLoading': true}).then(function (data) {
                if(method_type==1){
                    //修改
                    if(data.code == '0'){
                        $Toast({
                            content: '修改成功',
                            type: 'success'
                        })
                        // that.$router.push("/pages/center/child/commonList/main")
                        // wx.navigateBack({
                        //     delta: 1
                        // })
                        wx.redirectTo({
                            url: "/pages/center/child/commonList/main"
                        })
                        that.userInfo = {}

                    }else{
                        $Toast({
                            content: '修改失败',
                            type: 'warning'
                        })
                    }

                }else{
                    //新增
                    if(data.code == '0'){
                        $Toast({
                            content: '新增成功',
                            type: 'success'
                        })
                        if(that.$route.query.nowBooking) {
                            that.$router.go(-1)
                            return
                        }
                        // that.$router.push("/pages/center/child/commonList/main")
                        // wx.navigateBack({
                        //     delta: 1
                        // })
                        wx.redirectTo({
                            url: "/pages/center/child/commonList/main"
                        })
                        that.userInfo = {}

                    }else{
                        $Toast({
                            content: '新增失败',
                            type: 'warning'
                        })
                    }
                }


           })
        }
    },
}
</script>
<style lang="less" scoped>
.page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .top{
        flex:1;
        font-size: 36rpx;
        .dot{
            display: inline-block;
        }
        .tip{
            height: 60rpx;
            background-color: #FFF3E7;
            color: #FF9429;
            font-size:30rpx;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:rgba(255,148,41,1);
            line-height:60rpx;
            padding-left: 30rpx;
        }
        .footer{
            // height: 24rpx;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
           .checked-image {
                width: 50rpx;
                height: 50rpx;
                margin:0 20rpx 0 0;
                vertical-align: middle;
                margin-right: 10rpx;
            }
        }
        }
        .red{
            color: #F82525;
        }
        .blue{
            color: #258FF8;
        }
    }
    .bottom{
        height: 120rpx;
        padding: 0rpx 40rpx 40rpx 40rpx;
        box-sizing: border-box;
        .btn{
            background-color: #3F4ADE;
            border-radius:4rpx;
            color:#fff;
            border:1px solid rgba(160,183,237,1);
            font-size:36rpx;
            line-height:90rpx;
            text-align: center;
        }
    }
.modalClass {
  position: absolute;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 9;
  // background:rgba(0,0,0,1);
  // opacity:0.6;
  .modalBox {
    width: 617rpx;
    // height:663rpx;
    z-index: 99;
    background: #ffffff;
    border-radius: 12px;
    position: relative;
    .modalTit {
      width: 100%;
      img {
        width: 100%;
        height: 220rpx;
      }
    }
    .closeBox {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: -30rpx;
      top: -30rpx;
      img {
        width: 100%;
        height: 100%;
        z-index: 99;
      }
    }
    .modalCenter {
      padding: 67rpx 30rpx 33rpx 37rpx;
      display: flex;
      flex-direction: column;
      .picClass {
        height: 131rpx;
        line-height: 131rpx;
        text-align: center;
        border-top: 1rpx solid #e9e9e9;
        border-bottom: 1rpx solid #e9e9e9;
        div {
          font-size: 50rpx;
          font-weight: normal;
          color: rgba(34, 75, 198, 1);
        }
      }
      .dataBox {
        margin-bottom: 40rpx;
        span {
          display: inline-block;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          vertical-align: middle;
        }
        .itemPie {
          width: 12rpx;
          height: 12rpx;
          background: rgba(74, 100, 234, 1);
          border-radius: 50%;
          margin-right: 15rpx;
          // vertical-align: middle;
          margin-bottom: 5rpx;
        }
        .itemSpan {
          width: 95%;
        }
      }
    }
    .modalFooter {
      div {
        width: 50%;
        height: 90rpx;
        font-size: 36rpx;
        font-weight: 400;
        display: inline-block;
        text-align: center;
        line-height: 90rpx;
      }
      .btnLeft {
        background: rgba(247, 248, 250, 1);
        border-radius: 0rpx 0rpx 0rpx 24rpx;
        color: #333333;
        box-sizing: border-box;
      }
      .btnRight {
        background: rgba(74, 100, 234, 1);
        border-radius: 0rpx 0rpx 24rpx 0rpx;
        color: #ffffff;
        box-sizing: border-box;
      }
    }
    .btnDis {
      background: #c5c8ce;
    }
  }
}


</style>
